<template>
  <div class="search">
    <van-icon @click="goBack" class="icon" name="arrow-left" />
    <van-search
      class="dd"
      background="#b0352f"
      v-model="keyWord"
      placeholder="搜索您喜欢的商品"
      @click="goSearchPage"
      v-if="searchShow"
    />

    <div class="text" @click="goSearchList">
      <slot>
        <div>搜索</div>
      </slot>
    </div>
  </div>
</template>

<script>
import http from "@/common/api/request";
import sort from "./sort.vue";
export default {
  props:['searchShow'],
  components: { sort },
  data() {
    return {
      keyWord: "",
      historyArr: [],
      
    };
  },
  methods: {
    goSearchPage() {
      if (this.$route.path == "/list") {
        this.$router.push({
          path: "/search",
        });
      }
    },
    // 搜素请求
    getdata() {
      http
        .$axios({
          url: `/api/goods/shopList?searchName=${this.keyWord}`,
          // params: {
          //   searchName: this.$route.query.keyWord,
          // },
        })
        .then((res) => {
          this.$emit("changeGoodsList", res);
        });
    },
    goBack() {
      // 清空背景颜色
      document.querySelector("body").removeAttribute("style");
      this.$router.go(-1);
    },
    goSearchList() {
      if (this.$route.path == "/list") {
        this.$router.push({
          path: "/",
        });
      }
      if (!this.keyWord) {
        return;
      }
      if (this.$route.path == "/search") {
        this.$router.push({
          name: "searchList",
          query: { keyWord: this.keyWord },
        });
      } else {
        // 发起搜索请求
        this.getdata();
      }

      // 缓存历史记录
      this.historySearch();
    },

    // 添加历史搜索
    historySearch() {
      // 判断值是否为空
      if (!this.keyWord) {
        return;
      }

      // 判断有没有本地缓存
      if (!localStorage.getItem("search")) {
        localStorage.setItem("search", "[]");
      } else {
        // 之前有
        this.historyArr = JSON.parse(localStorage.getItem("search"));
      }
      // 增加数据
      this.historyArr.unshift(this.keyWord);

      // ES6去重 new出来的是对象还要变回数组
      let newArr = new Set(this.historyArr);

      // 给本地存储数值
      localStorage.setItem("search", JSON.stringify(Array.from(newArr)));
    },
  },
  mounted() {
    if (this.$route.name == "searchList") {
      this.keyWord = this.$route.query.keyWord;
    }
  },
  // beforeCreate() {
  //   // 生成背景颜色
  //   document
  //     .querySelector("body")
  //     .setAttribute("style", "background-color:#f5f5f5");
  // },
  // beforeDestroy() {
  //   document.querySelector("body").removeAttribute("style");
  // },
};
</script>

<style scoped lang='scss'>
.dd {
  width: 7.3659rem;
}
.text {
  font-size: 0.3902rem;
  flex: 1;
  text-align: center;
}
.icon {
  padding: 0 3vw;
  font-size: 6vw;
}
.van-search {
  padding: 0;
}
.search {
  background-color: #b0352f;
  width: 100vw;
  height: 1.0732rem;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-between;
}
::v-deep .van-field__control {
  font-size: 4vw;
}
.van-search__content {
  background-color: white;
  border-radius: 99px;
}
</style>